/* ==========================================================================
    VELOX — Design Tokens & Base
   ========================================================================== */

html { scrollbar-gutter: stable; }

:root {
    /* cores */
    --c-primary: #06b6d4;
    --c-primary-600: #0891b2;
    --c-primary-050: rgba(6, 182, 212, .08);
    --c-primary-shadow: rgba(6, 182, 212, .25);
    --c-primary-shadow-sm: rgba(6, 182, 212, .18);
    --c-warning-shadow: #fee2e2;

    --c-bg: #ffffff;
    --c-text: #0f172a;
    --c-muted: #6b7280;
    --c-subtle: #9ca3af;
    --c-line: #e5e7eb;

    --c-badge-info-bg: #e0f2fe;
    /* azul claro */
    --c-badge-info-tx: #0369a1;
    --c-success-bg: #dcfce7;
    --c-success-tx: #166534;
    --c-muted-bg: #e5e7eb;
    --c-muted-tx: #374151;

    --c-icon: #64748b;

    --c-warning: #fee2e2;
    --c-warning-hover: #b91c1c;


    /* raios / sombras */
    --r-sm: 10px;
    --r-md: 12px;
    --r-lg: 16px;

    --shadow-card: 0 14px 40px var(--c-primary-shadow-sm);
    --shadow-btn: 0 8px 24px var(--c-primary-shadow);
    --shadow-btn-sm: 0 4px 14px var(--c-primary-shadow-sm);

    --shadow-btn-warn-sm: 0 8px 24px var(--c-warning-shadow);

    /* espaçamentos */
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;

    /* tipografia */
    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-md: 16px;
    --fs-lg: 18px;
    --fs-xl: 20px;
    --fs-2xl: 28px;
    --fw-light: 400;
    --fw-normal: 500;
    --fw-bold: 700;
    --fw-xbold: 800;

    /* larguras */
    --container-max: 1400px;
}

/* Acessibilidade: foco visível padrão */
:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

/* Respeitar usuários que preferem menos animação */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}

/* ==========================================================================
    Layout de Página
   ========================================================================== */

.page-wrap {
    max-width: var(--container-max);
    margin-inline: auto;
    /*padding-block: var(--sp-2) var(--sp-6); */
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: 18px;
}

.page-title {
    margin: 0;
    font-size: var(--fs-2xl);
    font-weight: var(--fw-xbold);
}


.page-title i {
    color: var(--c-primary);
}


.page-subtitle {
    margin: 4px 0 0;
    color: var(--c-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-light);
}

.div-content-consulta .container{
    padding: 0 !important;
    margin-top: 0 !important;
    box-shadow: none;
}

.mensagem-local {
    margin: 4px 0 0;
    color: var(--c-muted);
    font-size: var(--fs-md);
    font-weight: var(--fw-light);
    margin-left: 6vw;
}

.mensagem-local {
    margin: 4px 0 0;
    color: var(--c-muted);
    font-size: var(--fs-md);
    font-weight: var(--fw-light);
    margin-left: 1.2vw;
}

.mensagem-local i {
    cursor: pointer;
    margin-left: 10px;
    font-size: 20px;
}

/* ==========================================================================
    Botões (base + variantes)
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 40px;
    padding-inline: 16px;
    border-radius: var(--r-sm);
    border: 1px solid var(--c-line);
    background: var(--c-bg);
    color: var(--c-text);
    font-weight: var(--fw-normal);
    font-size: var(--fs-sm);
    text-decoration: none;
    transition:
        background .15s ease,
        box-shadow .15s ease,
        transform .15s ease,
        color .15s ease,
        border-color .15s ease;
    cursor: pointer;
}

.btn-100 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 30px;
    padding-inline: 16px;
    border-radius: var(--r-sm);
    border: 1px solid var(--c-line);
    background: var(--c-bg);
    color: var(--c-text);
    font-weight: var(--fw-normal);
    font-size: var(--fs-xs);
    text-decoration: none;
    transition:
        background .15s ease,
        box-shadow .15s ease,
        transform .15s ease,
        color .15s ease,
        border-color .15s ease;
    cursor: pointer;
    width: 100%;
}

/* primário cheio */
.btn-primary {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
    height: auto;
    padding: 10px 16px;
    border-radius: 10px;
}

.btn-primary span {
    font-size: var(--fs-lg);
    line-height: 0;
}

.btn-primary:hover {
    transform: scale(1.02);
}

.btn-white {
    border: none;
    background-color: white;
    color: var(--c-text)
}

.btn-white:hover {
    background: var(--c-primary);
    color: var(--c-success-bg);
    border-color: var(--c-primary);
    box-shadow: var(--shadow-btn);
    transform: translateY(-1px);
}

.btn-outline:hover {
    border-color: var(--c-badge-info-tx);
    box-shadow: var(--shadow-btn);
    transform: translateY(-1px);
}

.btn-warning {
    border: none;
    background-color: var(--c-warning);
    color: var(--c-warning-hover)
}

.btn-warning:hover {
    background: var(--c-warning-hover);
    color: var(--c-badge-info-bg);
    border-color: var(--c-warning-hover);
    box-shadow: var(--shadow-btn-warn-sm);
    transform: translateY(-1px);
}

/* “outline aqua” (claro) */
.btn-medium {
    border: 2px solid var(--c-primary);
    background: #e0f2fe;
    color: var(--c-primary-600);
}

.btn-medium:hover {
    background: var(--c-primary);
    color: #fff;
    border-color: var(--c-primary);
    box-shadow: var(--shadow-btn);
    transform: translateY(-1px);
}

/* “outline aqua” (claro) */
.btn-light {
    border: 2px solid var(--c-primary);
    background: #fff;
    color: var(--c-primary-600);
}

.btn-light:hover {
    background: var(--c-primary);
    color: #fff;
    border-color: var(--c-primary);
    box-shadow: var(--shadow-btn);
    transform: translateY(-1px);
}

.btn-light:active {
    transform: translateY(0);
    box-shadow: var(--shadow-btn-sm);
}

/* agrupar botões em rodapés/cartões */
.card-footer {
    display: flex;
    gap: 10px;
}

/* ==========================================================================
    Toolbar / Busca / Filtros
   ========================================================================== */

.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin: 10px 0 18px;
}

.search-wrap {
    position: relative;
    flex: 1;
}

.search-wrap i {
    position: absolute;
    inset-inline-start: 12px;
    inset-block-start: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--c-subtle);
    pointer-events: none;
}

.search-wrap .input-pesquisa {
    height: 35px;
    width: 100%;
    padding-inline-start: 38px !important;
    /* espaço para o ícone */
    border: 1px solid var(--c-line);
    border-radius: 10px;
}

.filters {
    display: flex;
    gap: 10px;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--r-md);
    border: 1px solid var(--c-line);
    background: var(--c-bg);
    color: #111827;
    font-size: var(--fs-sm);
    font-weight: var(--fw-normal);
    cursor: pointer;
    user-select: none;
}

.filter-chip:hover {
    background: var(--c-primary);
    color: #fff;
    border-color: var(--c-primary);
}

.filter-chip.active {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}

/* ============================================================
    VX Input — padrão Velox (modal + login + formulários)
============================================================ */
.vx-input {
    width: 100%;
    background: var(--vx-field, #ffffff);
    border: 1px solid var(--vx-border, #e5e7eb);
    border-radius: 12px;
    color: var(--vx-text, #0f172a);
    padding: 12px 14px;
    height: 2.5rem;
    font-size: .85rem;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto;
}

.vx-input::placeholder {
    color: var(--vx-placeholder, #94a3b8);
}

.vx-input:focus {
    border-color: #06b6d4;
    box-shadow: 0 0 0 1px #06b6d4;
}

.vx-input:disabled {
    background: #f8fafc;
    color: #94a3b8;
}

/* erro */
.vx-input.is-invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .15);
}


/* ==========================================================================
    Grid de Cards
   ========================================================================== */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
    max-height: 67vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: .25rem;
    scroll-behavior: smooth;
}

.cards-grid .cards-empty {
    grid-column: 1 / -1;          /* <<< ocupa todas as colunas do grid */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    border-radius: 12px;
    border: 1px dashed var(--border-muted, #d0d7de);
    background: var(--bg-soft, #f8fafc);
}

.cards-grid .cards-empty .empty-icon {
    font-size: 3rem;
    margin-bottom: 0.75rem;
    opacity: 0.3;
}

/* barra de rolagem personalizada */
.cards-grid::-webkit-scrollbar {
    width: 6px;
}

.cards-grid::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 6px;
}

.cards-grid::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

@media (min-width: 520px) {
    .cards-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 700px) {
    .cards-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (min-width: 900px) {
    .cards-grid {
        grid-template-columns: repeat(8, 1fr);
    }
}

@media (min-width: 1200px) {
    .cards-grid {
        grid-template-columns: repeat(12, 1fr);
    }
}

/* Cartão de funcionário (span 3 = 4 cards por linha no grid de 12) */
.func-card {
    grid-column: span 3;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    background: var(--c-bg);
    transition:
        box-shadow .18s ease,
        transform .18s ease,
        border-color .18s ease;
}

.func-card:hover {
    box-shadow: var(--shadow-card);
    transform: translateY(-2px);
    border-color: #c7f3fb;
    cursor: pointer;

    .nome {
        color: var(--c-primary);
    }

    .btn-white {
        color: var(--c-primary);
        border: solid 1px;
        border-color: var(--c-primary);
    }

    .btn-white:hover {
        color: var(--c-bg);
    }
}

.func-card.is-inativo {
    opacity: .85;
}

/* Cabeçalho do card */
.card-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: var(--c-badge-info-bg);
    color: #0284c7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.id-block .nome {
    margin: 0 0 6px;
    font-size: var(--fs-lg);
    font-weight: var(--fw-xbold);
}

/* Badges */
.badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.badge {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    white-space: nowrap;
}

.badge.role {
    background: var(--c-badge-info-bg);
    color: var(--c-badge-info-tx);
}

.badge.status.success {
    background: var(--c-success-bg);
    color: var(--c-success-tx);
}

.badge.status.muted {
    background: var(--c-muted-bg);
    color: var(--c-muted-tx);
}

.card-body {
    flex: 1 1 auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: start;
}

/* Corpo do card */
.card-body .line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
    color: var(--c-subtle);
    transition: color .15s ease;
    font-size: var(--fs-sm);
}

.card-body .line i {
    color: var(--c-primary);
}

.card-body .muted {
    color: var(--c-subtle);
}

/* Chips */
.chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.chip {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    background: #f1f5f9;
    color: #334155;
}


/* ===== KPIs ===== */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(18, 1fr);
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
}

.kpi-card {
    grid-column: span 3;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: 14px;
    padding: 16px 18px;
}

.kpi-title {
    color: var(--c-muted-tx);
    font-size: var(--fs-xs);
    font-weight: var(--fw-normal);
}

.kpi-value {
    font-size: clamp(18px, 2.5vw, 26px);
    font-weight: var(--fw-normal);
    color: var(--c-text);
}

.kpi-value.is-accent {
    color: var(--c-primary);
}

.kpi-sub {
    color: var(--c-subtle);
    font-size: var(--fs-xs);
    margin-top: 4px;
}

.kpi-icon {
    font-size: 20px;
    color: #cbd5e1;
}

/* ===== Busca grande + filtro ===== */
.search-row {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: 14px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-row .search-wrap {
    flex: 1;
}

.filter-inline {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ===== Dropdown do botão Novo (header) ===== */
.dropdown-wrapper {
    position: relative;
}

.dropdown-wrapper .dropdown-content-novo {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(2, 6, 23, .12);
    padding: 6px;
    display: none;
    z-index: 10;
}

.dropdown-wrapper.is-open .dropdown-content-novo {
    display: block;
}

.dropdown-content-novo a {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--c-text);
}

.dropdown-content-novo a:hover {
    background: #f8fafc;
}

/* ===== Lista de negociações (cards) ===== */
.deal-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 16px;

    /* scroll interno */
    max-height: 54vh;
    /* ou ajuste conforme o layout */
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: .3rem;
    /* evita que o scroll sobreponha conteúdo */
    scroll-behavior: smooth;
}

.deal-list .deal-list-empty{    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    border-radius: 12px;
    border: 1px dashed var(--border-muted, #d0d7de);
    background: var(--bg-soft, #f8fafc);
}

.deal-list .deal-list-empty .empty-icon {
    font-size: 3rem;
    margin-bottom: 0.75rem;
    opacity: 0.3;
}

/* estiliza a barra de rolagem */
.deal-list::-webkit-scrollbar {
    width: 6px;
}

.deal-list::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 6px;
}

.deal-list::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ====== CARD: 5 colunas reais ====== */
.deal-card {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: 16px;
    padding: 18px;
    display: grid;
    /* meta | veículos | troca | valores | ações */
    grid-template-columns: 1.2fr 1.2fr 1.2fr 1fr auto;
    gap: 16px;
    align-items: center;
    transition: box-shadow .18s, transform .18s, border-color .18s;
}

.deal-card[data-selected="true"] {
    outline: 2px solid var(--accent, #4caf50);
    background-color: rgba(76, 175, 80, 0.08);
}


.deal-card:hover {
    box-shadow: var(--shadow-card);
    transform: translateY(-2px);
    border-color: #d8eef6;
    cursor: pointer;
}

.deal-card.is-venda {
    border-left: 4px solid #22c55e;
}

/* verde */
.deal-card.is-compra {
    border-left: 4px solid #3b82f6;
}

/* azul */

/* cabeçalho do card (tipo + status) */
.deal-topline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.deal-kind {
    font-weight: var(--fw-xbold);
}

.deal-kind.is-venda {
    color: #22c55e;
}

.deal-kind.is-compra {
    color: #3b82f6;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    background: #f1f5f9;
    color: #334155;
}

.pill.is-ongoing {
    background: #fef3c7;
    color: #92400e;
}

/* amarelo */
.pill.is-closed {
    background: #dcfce7;
    color: #166534;
}

/* verde */

.deal-party .name {
    font-weight: var(--fw-normal);
    font-size: var(--fs-xs);

}

.deal-meta small {
    font-size: var(--fs-xs);
    color: var(--c-subtle);
    display: block;
    margin-top: 2px;
}

.deal-vehicle .v-title,
.deal-trade .v-title {
    font-weight: var(--fw-normal);
    font-size: var(--fs-xs);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.deal-vehicle small {
    color: var(--c-subtle);
    display: block;
    margin-top: 2px;
}

/* (opcional) coluna de valores bem alinhada à direita */
.deal-price {
    text-align: right;
    justify-self: end;
}

.deal-value {
    font-weight: var(--fw-xbold);
}

.deal-terms {
    color: var(--c-subtle);
    font-size: var(--fs-sm);
    margin-top: 2px;
}

/* coluna de ações: botões lado a lado e grudados à direita */
.deal-actions {
    display: flex;
    flex-direction: row;
    /* <— era column */
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
    justify-self: end;
    /* garante ficar na última coluna, à direita */
}

.icon-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--c-line);
    border-radius: 10px;
    background: #fff;
    display: grid;
    place-items: center;
    font-size: 18px;
    color: #475569;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .15s;
}

.icon-btn:hover {
    background: #f8fafc;
    border-color: #dbe3ea;
    transform: translateY(-1px);
}

/* Lista vertical compacta (um item por linha) */
.v-list {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--fs-sm);
}

.v-list li {
    color: var(--c-text);
}

.v-list .muted {
    color: var(--c-subtle);
}

.deal-price .deal-value {
    font-weight: var(--fw-xbold);
}

.deal-price .deal-terms {
    color: var(--c-subtle);
    font-size: var(--fs-sm);
    margin-top: 2px;
}

/* responsivo: empilha tudo no mobile */
@media (max-width: 980px) {
    .deal-card {
        grid-template-columns: 1fr;
    }

    .deal-price {
        text-align: left;
        justify-self: start;
    }

    .deal-actions {
        justify-self: start;
    }
}


/* === Linha de veículo no estilo do mock === */
.v-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.v-item {
    --v-icon: 18px;
    --v-gap: 8px;
}

.v-item .v-head {
    display: flex;
    align-items: center;
    gap: var(--v-gap);
    font-weight: var(--fw-normal);
    font-size: var(--fs-xs);
}

.v-item .v-head i {
    width: var(--v-icon);
    height: var(--v-icon);
    font-size: var(--v-icon);
    color: #94a3b8;
    /* cinza do ícone */
    display: inline-grid;
    place-items: center;
}

.v-item .v-name {
    color: var(--c-text);
}

.v-item .v-sub {
    margin-left: calc(var(--v-icon) + var(--v-gap));
    /* alinha com o título, não com o ícone */
    color: var(--c-subtle);
}

/* (opcional) dá um respiro quando houver muitos itens */
.deal-vehicle,
.deal-trade {
    display: flex;
    flex-direction: column;
    gap: 6px;
}


.suggestions-box .veh-suggestion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.suggestions-box .veh-right {
    margin-left: auto;
    text-align: right;
    min-width: 180px;
}

.suggestions-box .veh-right .label {
    opacity: .7;
    margin-right: 6px;
    color: black;
}

.suggestions-box .veh-right .val {
    font-weight: 600;
}

/* ----------------------- adicionado por Guilherme dia 26/09/25 */

/* Estilos específicos para cada tipo de posição do veículo */
.deal-card.is-estoque {
    border-left: 4px solid #4caf50;
}

/* verde */
.deal-card.is-historico {
    border-left: 4px solid #9e9e9e;
}

/* cinza */
.deal-card.is-baixado {
    border-left: 4px solid #f44336;
}

/* vermelho */
.deal-card.is-digitacao {
    border-left: 4px solid #ff9800;
}

/* laranja */
.deal-card.is-avaliacao {
    border-left: 4px solid #ffeb3b;
}

/* amarelo */
.deal-card.is-manutencao {
    border-left: 4px solid #03a9f4;
}

/* azul claro */
.deal-card.is-negociacao {
    border-left: 4px solid #9c27b0;
}

/* roxo */
.deal-card.is-compra {
    border-left: 4px solid #3b82f6;
}

.deal-card.is-receber {
    border-left: 4px solid #4bf63b;
}

/* azul */

.deal-kinds {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 7px;
    /* Cantos mais retos para um "quadrado" */
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    background: #f1f5f9;
    color: #334155;
}



/* Estilos de cor para cada tipo de negociação */
.deal-kinds.is-estoque {
    color: #4caf50;
}

/* verde */
.deal-kinds.is-historico {
    color: #9e9e9e;
}

/* cinza */
.deal-kinds.is-baixado {
    color: #f44336;
}

/* vermelho */
.deal-kinds.is-digitacao {
    color: #ff9800;
}

/* laranja */
.deal-kinds.is-avaliacao {
    color: #ffeb3b;
}

/* amarelo */
.deal-kinds.is-manutencao {
    color: #03a9f4;
}

/* azul claro */
.deal-kinds.is-negociacao {
    color: #9c27b0;
}

/* roxo */
.deal-kinds.is-compra {
    color: #3b82f6;
}

/* azul */

/* Estilos específicos por tipo de documento */
.deal-card.is-termo{
    border-left: 4px solid #4caf50;
}

/* verde */
.deal-card.is-procuração {
    border-left: 4px solid #9e9e9e;
}

/* cinza */
.deal-card.is-declaração {
    border-left: 4px solid #f44336;
}

/* vermelho */
.deal-card.is-contratocompra {
    border-left: 4px solid #ff9800;
}

/* laranja */
.deal-card.is-contratovenda {
    border-left: 4px solid #a09b6b;
}

/* amarelo */
.deal-card.is-Contratoconsignação {
    border-left: 4px solid #03a9f4;
}

/* azul claro */
.deal-card.is-contratofinanciamento {
    border-left: 4px solid #9c27b0;
}

/* roxo */

/* Estilos específicos por tipo de documento */
.deal-kind.is-termo {
    color: #4caf50;
}


.deal-kind.is-procuração {
    color: #9e9e9e;
}


.deal-kind.is-declaração {
    color: #f44336;
}


.deal-kind.is-contratocompra {
    color: #ff9800;
}


.deal-kind.is-contratovenda {
    color: #a09b6b;
}


.deal-kind.is-Contratoconsignação {
    color: #03a9f4;
}

.deal-kind.is-contratofinanciamento {
    color: #9c27b0;
}

.deal-card.is-pagar {
    border-left: 4px solid #f6413b;
}

.deal-card.is-receber {
    border-left: 4px solid #099b22cb;
}

.deal-kind.is-pagar {
    color: #f6413b;
}

.deal-kind.is-receber {
    color: #099b22cb;
}

.deal-kind.is-parent-card {
    color: #f6413b;
}


.deal-card.parent-card {
    border-left: 4px solid #f6413b;
}

.deal-card.inativa .deal-kind {
    opacity: 0.6;
}

.deal-card.is-child {
    border-left: 4px dashed;
    margin-left: 20px;
}
    
.deal-card.inativa {
    background-color: #f9f9f9;
} 



/* Estilos de cor para situação de notas fiscais */

.deal-card.is-autorizada {
    border-left: 4px solid #4caf50;
}
.pill.is-autorizada {
    color: #4caf50;
}

/* verde */
.deal-card.is-cancelada {
    border-left: 4px solid #9e9e9e;
}
.pill.is-cancelada {
    color: #9e9e9e; 
}

/* cinza */
.deal-card.is-rejeitada {
    border-left: 4px solid #f44336;
}

.pill.is-rejeitada {
    color: #f44336; 
}


/* vermelho */
.deal-card.is-falha {
    border-left: 4px solid #ff9800;
}

.pill.is-falha {
    color: #ff9800; 
}


/* laranja */
.deal-card.is-pendente {
    border-left: 4px solid #ffeb3b;
}

.pill.is-pendente {
    color: #ffeb3b; 
}


/* amarelo */
.deal-card.is-processando {
    border-left: 4px solid #03a9f4;
}

.pill.is-processando {
    color: #03a9f4; 
}